'use client';

import React from 'react';
import { Card, List, Tag, Space, Button, Popconfirm, Avatar, Typography, Pagination } from 'antd';
import { EyeOutlined, DeleteOutlined, UserOutlined, CalendarOutlined, ClockCircleOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { Ticket } from '@/types/ticket';
import { 
  getStatusLabel, 
  getStatusColor, 
  getPriorityLabel, 
  getPriorityColor,
  getCategoryLabel,
  getCategoryColor 
} from '@/utils/constants';

const { Text, Paragraph } = Typography;

interface TicketListProps {
  tickets: Ticket[];
  loading: boolean;
  pagination: {
    current: number;
    pageSize: number;
    total: number;
  };
  onPaginationChange: (page: number, pageSize: number) => void;
  onViewTicket: (ticket: Ticket) => void;
  onDeleteTicket: (ticketId: string) => void;
}

const TicketList: React.FC<TicketListProps> = ({
  tickets,
  loading,
  pagination,
  onPaginationChange,
  onViewTicket,
  onDeleteTicket,
}) => {
  const handleViewTicket = (ticket: Ticket) => {
    onViewTicket(ticket);
  };

  const handleDeleteTicket = (ticketId: string) => {
    onDeleteTicket(ticketId);
  };

  const renderTicketCard = (ticket: Ticket) => (
    <Card
      key={ticket.id}
      className={`ticket-card priority-${ticket.priority}`}
      hoverable
      actions={[
        <Button
          key="view"
          type="text"
          icon={<EyeOutlined />}
          onClick={() => handleViewTicket(ticket)}
        >
          查看详情
        </Button>,
        <Popconfirm
          key="delete"
          title="确定要删除这个工单吗？"
          onConfirm={() => handleDeleteTicket(ticket.id)}
          okText="确定"
          cancelText="取消"
        >
          <Button
            type="text"
            danger
            icon={<DeleteOutlined />}
          >
            删除
          </Button>
        </Popconfirm>,
      ]}
    >
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
          <Text strong style={{ fontSize: 16, color: '#262626' }}>
            {ticket.title}
          </Text>
          <Tag color={getStatusColor(ticket.status)}>
            {getStatusLabel(ticket.status)}
          </Tag>
        </div>

        <Paragraph
          ellipsis={{ rows: 2, expandable: false }}
          style={{ color: '#595959', marginBottom: 12 }}
        >
          {ticket.description}
        </Paragraph>

        <div className="ticket-meta">
          <Tag color={getPriorityColor(ticket.priority)}>
            {getPriorityLabel(ticket.priority)}
          </Tag>
          <Tag color={getCategoryColor(ticket.category)}>
            {getCategoryLabel(ticket.category)}
          </Tag>
          
          {ticket.assignee && (
            <Space size={4}>
              <UserOutlined style={{ color: '#8c8c8c' }} />
              <Text type="secondary">{ticket.assignee}</Text>
            </Space>
          )}

          <Space size={4}>
            <ClockCircleOutlined style={{ color: '#8c8c8c' }} />
            <Text type="secondary">
              {dayjs(ticket.createdAt).format('YYYY-MM-DD HH:mm')}
            </Text>
          </Space>

          {ticket.dueDate && (
            <Space size={4}>
              <CalendarOutlined style={{ color: '#8c8c8c' }} />
              <Text type="secondary">
                截止: {dayjs(ticket.dueDate).format('YYYY-MM-DD')}
              </Text>
            </Space>
          )}
        </div>

        {ticket.tags && ticket.tags.length > 0 && (
          <div className="ticket-tags">
            {ticket.tags.map((tag, index) => (
              <Tag key={index} style={{ marginTop: 8 }}>
                {tag}
              </Tag>
            ))}
          </div>
        )}
      </div>
    </Card>
  );

  return (
    <div className="ticket-list-container">
      <List
        loading={loading}
        dataSource={tickets}
        renderItem={renderTicketCard}
        locale={{
          emptyText: '暂无工单数据',
        }}
        style={{ marginBottom: 24 }}
      />

      {pagination.total > 0 && (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Pagination
            current={pagination.current}
            pageSize={pagination.pageSize}
            total={pagination.total}
            onChange={onPaginationChange}
            showSizeChanger
            showQuickJumper
            showTotal={(total, range) => 
              `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
            }
            pageSizeOptions={['10', '20', '50', '100']}
          />
        </div>
      )}
    </div>
  );
};

export default TicketList; 